<%-- 
    Document   : index
    Created on : Sep 7, 2012, 11:49:06 AM
    Author     : 4pril
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">

  <!-- Use the .htaccess and remove these lines to avoid edge case issues.
       More info: h5bp.com/i/378 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title><c:out value="${sessionScope.currentUser.getUsername()}" /></title>
  <meta name="description" content="">

  <!-- Mobile viewport optimized: h5bp.com/viewport -->
  <meta name="viewport" content="width=device-width">

  <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->
  <!-- <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Helvetica World"> -->
  <link rel="stylesheet" href="style.css">

  <!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->

  <!-- All JavaScript at the bottom, except this Modernizr build.
       Modernizr enables HTML5 elements & feature detects for optimal performance.
       Create your own custom Modernizr build: www.modernizr.com/download/ -->
  <script src="js/libs/modernizr-2.5.3.min.js"></script>
</head>
<body>
  <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you support IE 6.
       chromium.org/developers/how-tos/chrome-frame-getting-started -->
  <!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->

  <!-- Begin wrapper -->
  <div id="the-wrapper">
    <!-- Begin header -->
    <div id="header">

      <!-- Begin header-bg -->
      <div id="header-bg">

        <!-- Begin friend-list-containner -->
        <div id="friend-list-containner">
          <ul id="friend-list" class="clearfix">
            <li><a href="#">
                <div id="small-avatar" class="avatar">
                    <div class="round">
                        <img src="img/small-avatar-1.png" alt="">
                    </div>
                </div>
              </a></li>
            <li><a href="#">
                <div id="small-avatar" class="avatar">
                    <div class="round">
                        <img src="img/small-avatar-2.png" alt="">
                    </div>
                </div>
              </a></li>
            <li><a href="#">
                <div id="small-avatar" class="avatar">
                    <div class="round">
                        <img src="img/small-avatar-3.png" alt="">
                    </div>
                </div>
              </a></li>
            <li><a href="#">
                <div id="small-avatar" class="avatar">
                    <div class="round">
                        <img src="img/small-avatar-4.png" alt="">
                    </div>
                </div>
              </a></li>
            <li><a href="#">
                <div id="dots"></div>
              </a></li>
          </ul>
        </div>
        <!-- End friend-list-containner -->

        <!-- Begin big-avatar -->
        <div id="big-avatar" class="avatar">
            <div class="round">
<!--                <a href="#"><img src="img/big-avatar-img.png" alt="" /></a>          -->
                <a href="#"><img src="img/photo.jpg" alt="" /></a>
            </div>
        </div>
        <!-- End big-avatar -->

        <!-- Begin username and status -->
        <div id="username-status" class="clearfix">
            <a href="#"><p class="fl"><c:out value="${sessionScope.currentUser.getUserRealName()}" /></p></a> 
          <span class="online fr"></span>
        </div>
        <!-- End username status -->        

      </div>
      <!-- End header-bg -->

      <!-- Begin header-menu-containner -->
      <div id="header-menu-containner">
        <ul id="header-menu">
          <a href="#"><li class="notification">27</li></a>
          <a href="#"><li class="chat">4</li></a>
          <a href="#"><li class="edit">90</li></a>
        </ul>
      </div>
      <!-- End header-menu-containner -->
    </div>
    <!-- End header -->

    <!-- Begin main -->
    <div id="main" class="clearfix">
      <div id="right-bar" class="fr">
        <!-- ul#online-list>a[href='']*3>li>div#user-online.clearfix[user-id='']>div#user-status.fl -->

        <!-- Begin online-list -->
        <ul id="online-list">
          <a href="#">
            <li>
              <div id="user-online" class="clearfix" user-id="">
                <div id="user-status" class="fl online"></div>
                <div id="user-info" class="fr">
                  <p class="username">Đặng Tài</p>
                  <p class="last-post">Đang làm bài</p>
                </div>
              </div>
            </li>
          </a>
          <a href="#">
            <li>
              <div id="user-online" class="clearfix" user-id="">
                <div id="user-status" class="fl online"></div>
                <div id="user-info" class="fr">
                  <p class="username">Hoàng Thùy</p>
                  <p class="last-post">Đang bực đấy</p>
                </div>
              </div>
            </li>
          </a>
          <a href="#">
            <li>
              <div id="user-online" class="clearfix" user-id="">
                <div id="user-status" class="fl offline"></div>
                <div id="user-info" class="fr">
                  <p class="username">Ngọc Hân</p>
                  <p class="last-post">Miss...</p>
                </div>
              </div>
            </li>
          </a>
        </ul>
        <!-- End online-list -->
        
      </div>
      <!-- End right-bar -->


      <!-- Begin left-main-contain -->
      <div id="left-main-contain" class="fl">
        
        <!-- Begin post -->
        <div class="post">

          <form action="">
            <!-- Begin write-post -->
            <div id="write-post">
              <textarea rows="3"></textarea>
            </div>
            <!-- End write-post -->

            <div class="control clearfix">
              <a href="#" class="control-button fl" id="upload-img"></a>
              <a href="#" class="control-button fl" id="upload-file"></a>
              <input type="submit" value="Đăng" class="fr" />
            </div>

          </form>

        </div>
        <!-- End post -->

        <!-- Begin post -->
        <div class="post">

          <form action="">

            <!-- Begin post-contain -->
            <div class="post-contain" post-id="">
              <p class="username">Triệu Khang</p>

              <!-- begin post code -->
              <div class="code-view">
                
                <script type="syntaxhighlighter" class="brush: java;"><![CDATA[
                  <p>Sai gì nhỉ</p>
                  </div>
                  <!-- End post-contain -->

                  <!-- Begin post-contain -->
                  <div class="post-contain" post-id="">
                    <p class="username">Triệu Khang</p>
                    <p>abc</p>
                  </div>
                ]]></script>

              </div>
              <!-- end post code -->

              <p>Sai gì nhỉ</p>
            </div>
            <!-- End post-contain -->

            <!-- Begin post-contain -->
            <div class="post-contain" post-id="">
              <p class="username">Triệu Khang</p>
              <p>abc</p>
            </div>
            <!-- End post-contain -->

            <!-- Begin post-contain -->
            <div class="post-contain" post-id="">
              <p class="username">Triệu Khang</p>
              <p>abc</p>
            </div>
            <!-- End post-contain -->

            <!-- Begin write-post -->
            <!-- <div id="write-post" class="comment">
              <textarea></textarea>
            </div> -->
            <!-- End write-post -->

            <div class="control clearfix">
              <!-- <a href="#" class="control-button fl" id="upload-img"></a>
              <a href="#" class="control-button fl" id="upload-file"></a> -->
              <input type="submit" value="Bình luận" class="fr" />
            </div>

          </form>

        </div>
        <!-- End post -->

        <!-- Begin post -->
        <div class="post">

          <form action="">

            <!-- Begin post-contain -->
            <div class="post-contain" post-id="">
              <p class="username">Triệu Khang</p>

              <!-- begin post code -->
              <div class="code-view">
                
                <script type="syntaxhighlighter" class="brush: java;"><![CDATA[
                  <p>Sai gì nhỉ</p>
                  </div>
                  <!-- End post-contain -->

                  <!-- Begin post-contain -->
                  <div class="post-contain" post-id="">
                    <p class="username">Triệu Khang</p>
                    <p>abc</p>
                  </div>
                ]]></script>

              </div>
              <!-- end post code -->

              <p>Sai gì nhỉ</p>
            </div>
            <!-- End post-contain -->

            <!-- Begin post-contain -->
            <div class="post-contain" post-id="">
              <p class="username">Triệu Khang</p>
              <p>abc</p>
            </div>
            <!-- End post-contain -->

            <!-- Begin post-contain -->
            <div class="post-contain" post-id="">
              <p class="username">Triệu Khang</p>
              <p>abc</p>
            </div>
            <!-- End post-contain -->

            <!-- Begin write-post -->
            <!-- <div id="write-post" class="comment">
              <textarea></textarea>
            </div> -->
            <!-- End write-post -->

            <div class="control clearfix">
              <!-- <a href="#" class="control-button fl" id="upload-img"></a>
              <a href="#" class="control-button fl" id="upload-file"></a> -->
              <input type="submit" value="Bình luận" class="fr" />
            </div>

          </form>

        </div>
        <!-- End post -->
        
      </div>
      <!-- End left-main-contain -->
    </div>
    <!-- End main -->

  </div>
  <!-- End wrapper -->

  <!-- JavaScript at the bottom for fast page loading -->

  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
  <!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>--> 
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>

  <!-- install SyntaxHighlighter -->
  <script type="text/javascript" src="js/libs/sh/XRegExp.js"></script> <!-- XRegExp is bundled with the final shCore.js during build -->
  <script type="text/javascript" src="js/libs/sh/shCore.js"></script>
  <script type="text/javascript" src="js/libs/sh/shBrushJScript.js"></script>
  <script type="text/javascript" src="js/libs/sh/shBrushJava.js"></script>
  <link type="text/css" rel="stylesheet" href="css/shCore.css"/>
  <link type="text/css" rel="Stylesheet" href="css/shThemeDefault.css" />
  <script type="text/javascript">SyntaxHighlighter.all();</script>
  <!-- end SyntaxHighlighter -->

  <!-- Add fancyBox main JS and CSS files -->
  <!-- end scripts -->

  <!-- Asynchronous Google Analytics snippet. Change UA-XXXXX-X to be your site's ID.
       mathiasbynens.be/notes/async-analytics-snippet -->
  <script>
  //   var _gaq=[['_setAccount','UA-33896517-1'],['_trackPageview']];
  //   (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
  //   g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
  //   s.parentNode.insertBefore(g,s)}(document,'script'));
  </script>
</body>
</html>